<script setup>
import SearchHeader from "~/components/search/SearchHeader2.vue";
import DiskInfoList from "~/components/diskInfoList2.vue";
import sourcesApiEndpoints from "~/assets/vod/clouddrive.json";
import { badWords } from "~/utils/sensitiveWords";

definePageMeta({
    layout: 'custom',
})

const route = useRoute()
const router = useRouter()
const keyword = ref(route.query.keyword)
const sources = ref([])
const skeletonLoading = ref(false)
const page = ref(1)
const size = ref(10)
const total = ref(0)

const handleSearch = async () => {
    skeletonLoading.value = true; // 开始加载状态
    try {
        const res = await $fetch('/api/allpan-search/allpan', {
            method: "GET",
            query: {
                keyword: keyword.value,
                page: page.value,
                size: size.value
            }
        });
        if (res.code == 200) {
            sources.value = res.data.list.map(item => {
                if (item.files) {
                    let indexNum = 1;
                    const files = item.files.split('file:');
                    const newFileList = [];
                    for (let i = 0; i < files.length; i++) {
                        if (files[i] && files[i].trim()) {
                            newFileList.push(`文件${indexNum}：` + files[i]);
                            indexNum++;
                        }
                    }
                    item.files = newFileList;
                } else {
                    item.files = [];
                }
                return item;
            });
            total.value = res.data.total;
        }
    } catch (err) {
        console.log(err);
    }
    skeletonLoading.value = false; // 结束加载状态
}



const search = (e) => {
    if (badWords.includes(e)) {
        return alert('请勿输入敏感词')
    }
    keyword.value = e
    skeletonLoading.value = true
    sources.value = []
    page.value = 1
    size.value = 10
    total.value = 0
    sources.value = []
    handleSearch()
}

const colorMode = useColorMode()

onMounted(() => {

})

</script>

<template>
    <div class="dark:bg-gray-400 min-h-screen text-center">
        <search-header :keyword="keyword" @search="search"></search-header>
        <div class="max-w-[1240px] mx-auto grid grid-cols-1 pb-8">
            <div class="w-full space-y-3 p-3 ">
                <div class="text-purple-500 text-3xl" v-if="skeletonLoading">资源正在加载中，请耐心等待...</div>
                <div v-if="sources.length === 0">
                    <div class="text-red-500 text-xs leading-8 font-bold text-[20px]" v-if="!skeletonLoading">

                    </div>
                </div>
                <div v-else>
                    <disk-info-list :sources="sources" :skeleton-loading="skeletonLoading"></disk-info-list>
                    <el-pagination v-model:current-page="page" v-model:page-size="size" :total="total"
                        :page-sizes="[10, 20, 30]"
                        layout="total, sizes, prev, pager, next, jumper" @current-change="handleSearch" 
                        @size-change="handleSearch"></el-pagination>
                </div>
            </div>
        </div>
        <el-backtop></el-backtop>
    </div>
</template>

<style scoped></style>